<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
    </div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class Life extends React.Component {
        constructor(props) {
            super(props);
            this.state = { 
                opacity:1
             }
        }

        componentDidMount(){
          this.intervalId = setInterval(()=>{    //开定时器 
                let {opacity} = this.state
                opacity -= 0.1
                if(opacity <= 0){
                    opacity = 1
                }
                this.setState({opacity})
            },200)
        }

        componentWillUnmount(){
            //清理定时器 
            clearInterval(this.intervalIds)
        }

        render() { 
            const {opacity} = this.state

            return ( 
                <div>
                    <h2>
                        收购腾讯  
                    </h2>
                    <h3 style={{opacity}}>{this.props.msg}</h3>

                    <button> 不活了 </button>
                </div>
             );
        }
    }
     
    ReactDOM.render(<Life msg="太难了"/>, document.getElementById("root"))   

//   React15 生命周期 
     //Mount 创建挂载阶段
     //    constructor()                      // 挂载的时候调用一次 可以在该方法中 对state里面的值进行初始化
     //    componenpWillReceiveProps()
     //    shouldConponentUpdata()
     //    componentWillMount()               // render之前会触发的 
     //    componentWillUpdate()
     //    componentDidUpdate()
     //    componentDidMount()                // 在渲染结束后被触发 
     //                                       // 真实的dom已经挂载到页面上了 可以在这个生命周期里执行真实的dom操作 (异步请求ajax 数据init)
     //                                                              
     //    render()                           // 在执行时并不会操作真实的dom 而是把需要渲染的内容返回出来 
     //                                       // rende方法的返回值描述了你希望在屏幕上看到的内容 React根据描述然后把结果展示出来 更具体地来说，render返回了一个React 元素                   
     //    componentWillnMOunt()   


     //Updating阶段
     //  组件更新 : 由父组件触发的 
     //  componentWillReceiveProps()
     //  shouleComponentUpdate()      组件更新 : 有组件自身触发的 (即state的值改变)
                        // shouleComponentUpdate(nextPros, nextState)  默认返回true即使数据没有发生变化  render()都会重新执行   (避免render 频繁调用 开销提供了这个) 
                        // 得手动往这个钩子里面添加  判断如果数据有变化 返回true 否则返回false   (也可使使用PureComponentUpdate)
                        // React组件根据shouleComponentUpdate的返回值 来决定是否执行该方法之后的生命周期 
                        // 进而决定是否对组件进行重新render(再次渲染)
    //  componentWillUpdate()
    //  render()
    //  componentDidUpdate()         
    /*
       父组件触发的更新 & 组件自身触发的更新相比 多出一个componentWillReceiveProps(nextProps)
                                              nextProps --- 表示接收新的props内容  
        如果父组件导致组件重新渲染  即使props没有更改也会调用此方法 (componentWillReceiveProps)
        如果只想处理更改 请确保进行当前值与变更值的比较   
        componentWillReceiveProps 并不是props的变化触发的 而是由父组件的更新触发的 
    */  
    // Unmounting阶段 组件的卸载
    /*
        组件卸载 
        componentWillUnmount()
        1 组件在父组件中被移除掉了  
        2 组件中设置了key属性 
          父组件在render过程中 发现key值和上次不一致  
    */

//16 版本的生命周期 
    /*
        消失了componentWIllMount 新增了getDerivedStateFromProps 使用props来派生、更新state

        新增了getDerivedStateFromProps 是一个静态方法 不依赖组件实例而存在(访问不到this的)
        getDerivedStateFromProps(props,state) 参1来自父组件props 参2组件自身state 
        需要一个对象格式的返回值  来更新
        


    */    

</script>